<script setup>
import { inject } from 'vue';

const {students,delstu} = inject("student")

// 定义一个删除学生的功能
const delstudent = (index) => {
    if(confirm("请确认是否删除")){
        // 删除当前学生
        delstu(index)

    }
}
</script>

<template>
    <tbody>
        <tr v-for="(stu, index) of students">

            <td>{{ stu.id }}</td>
            <td>{{ stu.name }}</td>
            <td>{{ stu.age }}</td>
            <td>{{ stu.gender }}</td>
            <td>{{ stu.address }}</td>
            <td>
                <!-- prevent 关闭默认行为 -->
                <!-- 在模板中可以通过$emit()来触发自定义事件 -->
                <a href="#" @click.prevent="delstudent(index)">删除</a>
            </td>
        </tr>
    </tbody>
</template>
<style scoped>
td {
    text-align: center;
    font-size: 15px;
    border: 1px #000 solid;
}
</style>